/**
* 描述：首页
*/
<style lang="scss" scoped>
  @import 'src/styles/index';
  #container{
    height: 0;
    margin: 0px;
  }
</style>
<style>
  .ivu-poptip-rel{width: 100%;}
</style>
<template>
  <div style="background: #fff; width:100%; height:100%;">
    <div class="banner">
      <img src="/static/images/web/index/banner01.jpg" width="100%" alt="bann01">
    </div>
    <!--<div class="map" style="display:none;">-->
      <!--<div id="container" tabindex="0" style="height: 400px;"></div>-->
    <!--</div>-->
    <transition name="fade">
      <div class="index-main">
        <div class="l-inner">
          <!--搜索-->
          <div class="index-SearchBlock">
              <div class="inner">
                  <!--<div class="index-input jobInput">-->
                    <!--<input type="text" placeholder="行业">-->
                    <!--<i class="icon icon-downTips"></i>-->
                    <!--<div class="clear"></div>-->
                  <!--</div>-->
                    <!--<div class="index-input industryInput">-->
                    <!--<input type="text" placeholder="职位">-->
                    <!--<i class="icon icon-downTips"></i>-->
                      <!--<div class="clear"></div>-->
                  <!--</div>-->
                  <div class="index-input keywordInput">
                    <input type="text" v-model="searchJobsData.name" placeholder="输入关键词搜索">
                    <a class="btn" @click="clickSearchJobs">搜工作</a>
                    <div class="clear"></div>
                  </div>
                  <div class="clear"></div>
                <div class="hotWords">
                  热门搜索： <a>产品经理</a> <a>UI设计</a> <a>JAVA</a>
                </div>
              </div>
          </div>
          <!--职位类型-->
          <div class="index-SearchJobsType">
            <!--.left-->
            <div class="leftJobs cccShadow">
              <div class="leftJobs-inner">
                <div class="job-one" v-for="item in jobList">
                  <el-popover placement="right" trigger="hover">
                    <div slot="reference" style="width: 100%">
                      <span class="name">{{item.label}}</span>
                      <i class="icon icon_dropRight"></i>
                      <div class="clear"></div>
                    </div>
                    <!--poptip显示的内容-->
                    <div class="">
                      <home-job-classify :itemData="item" v-on:homeJobData="homeJobData"></home-job-classify>
                    </div>
                  </el-popover>
                </div>
                <!--<a class="more">显示全部职位</a>-->
              </div>
            </div>
            <!--.right-->
            <div class="rightBanner">
              <el-carousel :interval="5000" arrow="always" style="height:468px;">
                <el-carousel-item style="height:468px;">
                  <img src="/static/images/web/index/ads/index_01.jpg" width="907" height="468" alt="right-banner" @click="$router.push('/ads01')" style="cursor: pointer;">
                </el-carousel-item>
                <el-carousel-item style="height:468px;">
                  <img src="/static/images/web/index/ads/index_02.jpg" width="907" height="468" alt="right-banner" @click="$router.push('/ads02')" style="cursor: pointer;">
                </el-carousel-item>
                <el-carousel-item style="height:468px;">
                  <img src="/static/images/web/index/ads/index_03.jpg" width="907" height="468" alt="right-banner" @click="$router.push('/ads03')" style="cursor: pointer;">
                </el-carousel-item>
                <el-carousel-item style="height:468px;">
                  <img src="/static/images/web/index/ads/index_04.jpg" width="907" height="468" alt="right-banner" @click="$router.push('/ads04')" style="cursor: pointer;">
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="clear"></div>
          </div>
          <!--名企招聘-->
          <div class="index-companys">
            <div class="index-blockTitle">
              <span class="bule">名企招聘</span>
              <!--<a class="more">查看更多</a>-->
              <div class="clear"></div>
            </div>
            <div class="companys-block" v-for="item in companyList">
              <div class="inner">
                <div class="comLogo">
                  <img :src="item.logo?`/api/pub/image/${item.logo}`:`/static/images/web/index/companyLogo.jpg`" alt="公司logo" width="108" height="108" @click="goToCompanyDetail(item.id)">
                </div>
                <div class="com-right">
                    <h2 @click="goToCompanyDetail(item.id)" class="overflowHidden">{{item.name}}</h2>
                    <h5>{{item.description}}</h5>
                </div>
                <div class="clear"></div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
          <!--热门职位-->
          <div class="index-jobs">
            <div class="index-blockTitle">
              <span :class="companyJobData.isActive===1?'buleLine':''" @click="companyJobData.isActive=1">热门职位</span>
              <span :class="companyJobData.isActive===2?'buleLine':''" @click="companyJobData.isActive=2">最新职位</span>
              <!--<a class="more">查看更多</a>-->
              <div class="clear"></div>
            </div>
            <div class="jobs-block cccShadow" v-for="item in companyJobData.list">
              <div class="inner">
                <div class="jobsLogo">
                  <img :src="item.companyLogo?`/api/pub/image/${item.companyLogo}`:`/static/images/web/index/companyLogo.jpg`" alt="公司logo" width="80" height="80" @click="goToJobDetail(item.id)">
                </div>
                <div class="jobsCenter">
                  <h2 @click="goToJobDetail(item.id)" class="overflowHidden" style="width: 160px;">{{item.title}}</h2>
                  <div class="jobsRight overflowHidden">{{item.salary | salaryState}}</div>
                  <div class="clear hr"></div>
                  <h5><i>{{item.cityId | cityAndType}}</i><i>|</i><i>{{item.experience | experience}}</i><i>|</i><i>{{item.education | education}}</i></h5>
                </div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
          <!--人才库-->
          <!--<div class="index-jobHunters">-->
            <!--<div class="index-blockTitle">-->
              <!--<span class="bule">人才库</span>-->
              <!--&lt;!&ndash;<a class="more">查看更多</a>&ndash;&gt;-->
              <!--<div class="clear"></div>-->
            <!--</div>-->
            <!--<div class="jobHunters-block">-->
              <!--<div class="leftReturn" @click="leftChage"></div>-->
              <!--<div class="inner">-->
                <!--<div class="allPic" id="activitysId"> &lt;!&ndash;所有图片做轮播&ndash;&gt;-->
                  <!--<div class="one" v-for="(item, index) in imageArray">-->
                    <!--<img :src="item.url" alt="人才" class="photo radius02">-->
                    <!--<a class="jobName radius02 overflowHidden">{{item.name}}</a>-->
                  <!--</div>-->
                  <!--<div class="clear"></div>-->
                <!--</div>-->
              <!--</div>-->
              <!--<div class="rightReturn" @click="rightChange"></div>-->
              <!--<div class="clear"></div>-->
            <!--</div>-->
          <!--</div>-->
        </div>
        <!--底部广告图-->
        <div class="index-ads">
          <img src="/static/images/web/index/ads01.jpg" alt="广告图" width="100%" height="100%">
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
  // import AMap from 'AMap';
  import $ from 'jquery';
  import HomeJobClassify from '@/components/common/jobClassify/homeJobClassify';
  import { dictJob } from '@/service/web/selectService/selectMService';
  import { getCompanyList, getCompanyJobList } from '@/service/web/homeService/homeMService';
  export default {
    components: {
      HomeJobClassify
    },
    data () {
      return {
        map: null,
        // 图片轮播
        left: 0,
        aIndex: 0,
        initActivityIndex: 6,
        imageArray: [
          {url: '/static/images/web/index/man01.jpg', name: 'JAVA 工程师'},
          {url: '/static/images/web/index/man01.jpg', name: 'JAVA 工程师'},
          {url: '/static/images/web/index/man01.jpg', name: 'JAVA 工程师'},
          {url: '/static/images/web/index/man01.jpg', name: 'JAVA 工程师'},
          {url: '/static/images/web/index/man01.jpg', name: 'JAVA 工程师'},
          {url: '/static/images/web/index/man01.jpg', name: 'JAVA 工程师'},
          {url: '/static/images/web/index/man01.jpg', name: 'JAVA 工程师'},
          {url: '/static/images/web/index/man01.jpg', name: 'JAVA 工程师'}
        ],
        jobList: [], // 职位列表
        companyList: [], // 名企列表
        companyJobData: {
          list: [],
          isActive: 1
        }, // 职务数据
        searchJobsData: {
          name: undefined
        }
      };
    },
    created () {
      this.getJobList(); // 获取职务类型
      this.getCompanyList(); // 获取企业列表
      this.getCompanyJobList(); // 获取热门职业列表
    },
    methods: {
      async getJobList () {
        let result = await dictJob();
        this.jobList = result.data || [];
      },
      homeJobData (homeJobData) {
        this.searchJobsData.name = homeJobData.label;
        this.clickSearchJobs();
      },
      // 获取名企信息、热门职务
      async getCompanyList () {
        let result = await getCompanyList();
        this.companyList = result.data;
      },
      async getCompanyJobList () {
        let result = await getCompanyJobList();
        this.companyJobData.list = result.data;
      },
      // 跳转到企业详情
      goToCompanyDetail (id) {
        this.$router.push({path: '/companyDetail', query: {id: id}});
      },
      // 跳转到职务详情
      goToJobDetail (id) {
        this.$router.push({path: '/jobDetail', query: {id: id}});
      },
      // 跳转到搜索页面
      clickSearchJobs () {
        if (!this.searchJobsData.name) this.searchJobsData.name = undefined;
        this.$router.push({path: '/searchJobs', query: {name: this.searchJobsData.name}});
      },
      // -----------------------------------------轮播图start------------------------------------------------------------
      // 点击活动上一步
      leftChage () {
        const arrayLength = this.imageArray.length;
        this.aIndex --;
        if (this.aIndex < 0) {
          this.left = 0;
          this.aIndex = arrayLength - this.initActivityIndex;
          this.left -= 170 * (this.aIndex);
          $('#activitysId .one').animate({left: this.left + 'px'});
        } else {
          this.left += 170;
          $('#activitysId .one').animate({left: this.left + 'px'});
        }
      },
      // 点击下一步
      rightChange () {
        const arrayLength = this.imageArray.length;
        this.aIndex ++;
        if ((this.aIndex + this.initActivityIndex) >= (arrayLength + 1)) {
          this.left += 170 * (arrayLength - this.initActivityIndex);
          $('#activitysId .one').animate({left: this.left + 'px'});
          this.aIndex = 0;
        } else {
          this.left -= 170;
          $('#activitysId .one').animate({left: this.left + 'px'});
        }
      }
  // -----------------------------------------轮播图END------------------------------------------------------------
  }
  };
</script>
